<template>
  <div class="login">
    <div class="img animate__animated animate__bounce">
      <img src="../assets/img/222.webp" alt="" />
    </div>
    <div class="btn">
      <van-button
        @click="push(0)"
        style="width: 50vw; border-radius: 20vw; margin: 10px 0px"
        >手机号登录</van-button
      >
      <van-button @click="push(1)" style="width: 50vw; border-radius: 20vw"
        >PC二维码登录</van-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    push(num) {
      num == 0 ? this.$router.push("/iphone") : this.$router.push("/qrcode");
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  width: 100%;
  background-image: url("../assets/tui.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: 60%;
  .img {
    display: flex;
    justify-content: center;
    padding-top: 25vw;
    animation-duration: 2s; /* don't forget to set a duration! */
    img {
      width: 20vw;
      height: 20vw;
    }
  }
  .btn {
    position: absolute;
    margin: 50vw 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>